<style scoped>
.cli-header-outline {
  display:flex;
  justify-content: space-between;
  align-items: center;
  height:63px;
  padding: 5px 32px;
  background: #fff;
  border-bottom: 1px solid #e8eaec;
  font-size:20px;
  font-weight: 500;
  margin:0 -24px;
  align-items: center;
}
.cli-header-wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
}
.cli-header-menu {
  display: none;
  position: absolute;
  background: #fff;
  min-height: 400px;
  width:100%;
  margin:0 -24px;
  left:12px;
  top:63px;
  z-index:999;

}
</style>
<template>
  <Row class="cli-header-outline">
    <span>
      <span :style="fontStyle">{{title}}</span>
    </span>
    <div class="cli-header-menu"></div>
    <div class="cli-header-wrapper">
      <slot></slot>
    </div>

  </Row>
</template>

<script>
export default {
  name: "view-header-general",
  data(){
    return {

    }
  },
  props:{
    title:String,
    fontStyle:{
      default:()=>{
        return {}
      }
    }
  }
}
</script>